import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { Avatar, Button, SearchBar, Toast } from 'antd-mobile';
// 修改第4行的图标导入
// import { FillinOutline, MessageCircleOutline, HeartOutline, StarOutline } from 'antd-mobile-icons';
import request from '../../../api/request';
import style from './detail.module.css';
import Navbar from '../../../compounts/navber/Navbar';

function CircleDetail() {
    const { id } = useParams(); // 从路由参数中获取病友圈ID
    // 数据
    const [circleDetail, setCircleDetail] = useState([]);
    // 评论数据
    const [circleComment, setCircleComment] = useState([]);

    // 输入框数据
    const [value, setValue] = useState('')


    // 获取详情数据
    const getCircleDetail = () => {
        request.get('/user/sickCircle/v1/findSickCircleInfo', {
            headers: {
                userId: 10,
                sessionId: 15320748258726,
            },
            params: {
                sickCircleId: id
            }
        }).then((res) => {
            // console.log(res);
            setCircleDetail(res.data.result)
        })
    }

    // 获取评论列表
    const getpinglun = () => {
        request.get('/user/sickCircle/v1/findSickCircleCommentList', {
            params: {
                sickCircleId: id,
                page: 1,
                count: 10
            }
        }).then((res) => {
            console.log(res);
            setCircleComment(res.data.result)
        })
    }

    // 发表评论
    const fasong = () => {
        if (!value.trim()) {
            Toast.show({
                icon: 'fail',
                content: '请输入评论内容',
            })
            return;
        }

        request.post('/user/sickCircle/verify/v1/publishComment', {
            sickCircleId: id,
            content: value
        })
        .then((res) => {
            console.log(res);
            if (res.data.status === '0000') {
                console.log('成功');
                getpinglun();
                // 消息提示
                Toast.show({
                    icon: 'success',
                    content: '评论成功',
                });
                // 清空输入框
                setValue('');
            } else {
                Toast.show({
                    icon: 'fail',
                    content: res.data.message || '评论失败',
                });
            }
        })
        .catch((error) => {
            console.error('发表评论失败:', error);
            Toast.show({
                icon: 'fail',
                content: '网络错误，请重试',
            });
        });
    }

    useEffect(() => {
        getCircleDetail()
        getpinglun()
    }, [id]);

    return (
        <div className={style.container}>
            <Navbar title={'病友圈详情'}></Navbar>
            <div>
                <div className={style.title}>张三</div>
                <div className={style.zu}>
                    <div className={style.spanges}>[病症]</div>
                    <p>{circleDetail.disease}</p>
                </div>

                <div className={style.zu}>
                    <div className={style.spanges}>[科室]</div>
                    <p>{circleDetail.department}内科</p>
                </div>

                <div className={style.zu}>
                    <div className={style.spanges}>[病症详情]</div>
                    <p>{circleDetail.detail}</p>
                </div>

                <div className={style.zu}>
                    <div className={style.spanges}>[治疗经历]</div>
                    <p>{circleDetail.treatmentHospital}{circleDetail.treatmentStartTime}-{circleDetail.treatmentEndTime}</p>
                    <p>{circleDetail.treatmentProcess}</p>
                </div>

                <div className={style.zu}>
                    <div className={style.spanges}>[相关图片]</div>
                    {
                        circleDetail.picture ? <img src={circleDetail.picture} alt="" /> : <div className={style.zwtp}>暂无图片</div>
                    }
                </div>
            </div>

            {/* 评论区域 */}
            <div className={style.commentSection}>
                <div className={style.commentHeader}>
                    <h3>患者评价 ({circleComment.length})</h3>
                    {/* <FillinOutline /> */}
                </div>

                {circleComment?.length ? (
                    <ul className={style.commentList}>
                        {circleComment.map((comment, index) => (
                            <li key={index} className={style.commentItem}>
                                <div className={style.commentUserInfo}>
                                    <Avatar src={comment.headPic} style={{ '--size': '30px', borderRadius: '50%' }} />
                                    <div className={style.userInfoText}>
                                        <h5 className={style.userName}>{comment.nickName || '匿名用户'}</h5>
                                        <p className={style.commentTime}>{comment.commentTime}</p>
                                    </div>
                                </div>
                                <div className={style.commentContent}>
                                    {comment.content || '该用户未留下评论内容'}
                                </div>
                            </li>
                        ))}
                    </ul>
                ) : (
                    <div className={style.noComment}>
                        暂无评论
                    </div>
                )}
            </div>

            {/* 输入框 */}
            <div className={style.inputbox}>
                <SearchBar 
                    placeholder='请输入内容' 
                    onChange={(val) => setValue(val)} 
                    value={value}  // 确保绑定value属性
                />
                <Button size='small' color='primary' onClick={fasong}>
                    发送
                </Button>
            </div>
        </div>
    );
}

export default CircleDetail